<template>
  <div class="securitySetting">
    <div class="box">
      <div class="svg">
        <svg-icon
          icon-class="lock"
          color="rgb(170,170,170)"
          width="0.4rem"
          height="0.4rem"
        ></svg-icon>
      </div>
      <div class="content">
        <h3>登录密码</h3>
        <p>建议您定期更换密码，设置安全性高的密码可以使帐号更安全</p>
        <el-button type="info" style="width: 0.6rem" size="large"
          >按钮</el-button
        >
      </div>
    </div>
    <div class="box">
      <div class="svg">
        <svg-icon
          icon-class="phone"
          color="rgb(170,170,170)"
          width="0.4rem"
          height="0.4rem"
        ></svg-icon>
      </div>
      <div class="content">
        <h3>安全手机150****8268</h3>
        <p>安全手机可以用于登录帐号，重置密码或其他安全验证</p>
        <el-button type="info" style="width: 0.6rem" size="large"
          >按钮</el-button
        >
      </div>
    </div>
    <div class="box">
      <div class="svg">
        <svg-icon
          icon-class="email"
          color="rgb(170,170,170)"
          width="0.4rem"
          height="0.4rem"
        ></svg-icon>
      </div>
      <div class="content">
        <h3>当前还未绑定邮箱地址</h3>
        <p>绑定邮箱可以用于登录帐号，重置密码或其他安全验证</p>
        <el-button type="info" style="width: 0.6rem" size="large"
          >按钮</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.securitySetting {
  padding-left: 8%;
  padding-top: 5%;
  .box {
    display: flex;
    margin-bottom: 0.2rem;
    .svg{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .content {
      margin-left: 0.2rem;
      h3 {
        font-weight: bold;
        font-size: 0.1rem;
      }
      p {
        font-size: 0.07rem;
        line-height: 0.24rem;
        color: rgb(153, 153, 153);
        margin-bottom: 0.04rem;
      }
    }
  }
}
.svg-icon {
  cursor: auto;
}
</style>
